<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(item, index) in iTableColumn"
      :key="index"
      :width="item.width"
      :prop="item.field"
      :label="item.label"
      ref="zTable"
    ></el-table-column>
  </el-table>
</template>

<style scoped>
</style>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: 'zExportPlugin',
  props: {
    tableData: {
      type: Array,
      default: []
    },
    tableColumn: {
      type: Array,
      default: []
    }
  },
  watch: {
    tableData: {
      deep: true,
      handler() {
        console.log('-=-=-=--=')
        console.log(this.tableData)
        this.iTtableData = this.tableData
      }
    },
    tableColumn: {
      deep: true,
      handler() {
        console.log('-=-=-=--=')
        console.log(this.tableColumn)
        this.iTableColumn = this.tableColumn
      }
    }
  },
  data() {
    return {
      iTtableData: this.tableData,
      iTableColumn: this.tableColumn
    }
  },
  methods: {
    exportExcel() {
      console.log('哈哈，开始导出')
      // generate workbook object from table
      var wb = XLSX.utils.table_to_book(document.querySelector('#tableDom'))
      // get binary string as output
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          'sheetjs.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
  }
}
</script>
